import React, { Component } from 'react'
import style from './hot.module.scss'
import {back_icon} from '../../common/icon/svg'
import { request } from '../../serverAPI'
export default class Hot extends Component {
    state={
        list:[],
        name:["总榜","文学","科技"]
    }
    back=()=>{
        this.props.history.push('/home')
    }
    componentDidMount(){
        request({
            url:"/hotLists",
            method:"GET"
        }).then(res=>{
            console.log(res);
            if(res.data.code==="01"){
                this.setState({
                    list:res.data.data
                })
            }else{
                alert("请求失败")
            }
        })
    }

    buy=(bid)=>{
        this.props.history.push("/bookInfoDetails/"+bid)
    }
    render() {
        let {i} = this.props.location.state
        return (
            <div className={style.hot}>
                <div className={style.head}>
                    <span className={style.back} onClick={this.back}>{back_icon}</span>
                    <span className={style.books}>热搜榜单</span>
                </div>
                <div className={style.content}>
                <h1>{this.state.name[i]}TOP05</h1>
                    <p>来自校园二手书10w+用户图示推荐</p>
                    <span>·  每日凌晨更新</span>
                </div>
                <div className={style["hot-list"]}>
                    {
                        this.state.list.length>0?this.state.list.map((item,i)=>{
                            return (
                                <div key={i} className={style["hot-collect"]}>
                                    <img src={"/apis/"+item["cover"]}></img>
                                    <div className={style["hot-item"]}>
                                        <h3 className={style.name}>{item.name}</h3>
                                        <p className={style.author}>{item.author}</p>
                                        <span className={style.collect}>{item.collect}读过</span>
                                    </div>
                                    <span className={style.buy} onClick={()=>this.buy(item.bid)}>购买此书</span>
                                </div>
                            )
                        }):<div className={style.kong}>
                            空空如也~~
                        </div>
                    }
                </div>
            </div>
        )
    }
}
